<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1 v-cloak> 倒计时：{{ msg }}</h1>
			<!--   v-texxt优先级大于插入值  -->
			<p v-text="data"> 倒计时：{{ msg }}</p>
			<!--   v-text支持表达式  -->
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<script type="text/javascript">
			let vm = new Vue({
				el: "#app",
				data: {
					msg: 60,
					timeId: ''
				},
				methods: {
					setTime() {
						if (this.msg == 0) {
							this.msg = 60;
						} else {
							this.msg--;
						}
					}
				},
				mounted() {
					//计时器  调用函数只需要写函数名   如果写了括号只会执行一次
					this.timeId = setInterval(this.setTime, 1000);
				},
				beforeDestroy() {
					clearInterval(this.timeId)
				}
			});
		</script>
	</body>
</html>
